<template>
  <div
    v-show="visible"
    :style="{ backgroundColor: background || '' }"
    :class="[customClass]"
    class="empty-mask"
  >
    <el-button class="close-btn" icon="el-icon-close" @click="close" v-if="showClose!=1" />
    <div class="empty-content">
      <img v-if="iconUrl" :src="iconUrl" class="empty-icon" />
      <p v-if="showText" class="empty-text">{{ showText }}</p>
    </div>
  </div>
</template>

<script>
import {
  removeClass,
  getStyle
} from 'element-ui/src/utils/dom'
export default {
  data() {
    return {
      text: null,
      background: null,
      visible: false,
      icon: null,
      customClass: "",
      origin: null,
      target: null,
      showClose:2 //是否显示关闭按钮，2展示，1不展示
    };
  },
  computed: {
    iconUrl: function() {
      /** 内置几个类型  当时none的时候  不展示 */
      if (this.icon) {
        if (this.icon === "none") {
          return "";
        } else if (this.icon === "nopermission") {
          return require("@/assets/img/nopermission.png");
        } else {
          return require("@/assets/img/empty.png");
        }
      } else {
        return require("@/assets/img/empty.png");
      }
    },
    showText: function() {
      /** 内置几个类型  当时none的时候  不展示 */
      if (this.text) {
        return this.text;
      } else {
        return "没有找到数据";
      }
    }
  },
  methods: {
    setText(text) {
      if (text) {
        this.text = text;
      }
    },
    setIcon(icon) {
      this.icon = icon;
    },
    setOrigin(origin) {
      this.origin = origin;
    },
    close() {
      this.$store = window.app.$store;
      this.$store.commit("SET_showDetail", false);

      const el = this.target;
      if (el.wkEmptyInserted) {
        el.wkEmptyMask &&
          el.wkEmptyMask.parentNode &&
          el.wkEmptyMask.parentNode.removeChild(el.wkEmptyMask);
        this.toggleEmpty(el, {
          value: false,
        });
      }
    },
    toggleEmpty(el, binding) {
      /** 如果是数组 判断数组长度  否则 判断是否存在 当做Boolean */
      if (
        (Object.prototype.toString.call(binding.value) === "[object Array]" &&
          binding.value.length === 0) ||
        (Object.prototype.toString.call(binding.value) !== "[object Array]" &&
          binding.value)
      ) {
        Vue.nextTick(() => {
          el.wkEmptyOriginalPosition = getStyle(el, "position");
          insertDom(el, el, binding);
        });
      } else {
        // 移除效果
        el.wkEmptyVisible = false;
        removeClass(el, "xs-empty-parent--relative");
        removeClass(el, "xs-empty-parent--hidden");
        el.wkEmptyInstance.visible = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.empty-mask {
  position: absolute;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.98);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.empty-content {
  top: 50%;
  width: 100%;
  text-align: center;
  position: absolute;
}

.empty-text {
  margin: 3px 0;
  color: #aaa;
  font-size: 13px;
}

.empty-icon {
  display: block;
  width: 150px;
  margin: 0 auto 20px auto;
}
.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  color: #aaa;
  font-size: 24px;
  border: none;
  background-color: transparent;
  &:hover {
    color: #333;
  }
}
</style>
